<template>
  <div>
    <el-popover
        v-scoped="this"
        popper-class="my-popper"
        placement="right"
        width="400"
        trigger="click">
      <el-table :data="gridData">
        <el-table-column width="150" property="date" label="日期"></el-table-column>
        <el-table-column width="100" property="name" label="姓名"></el-table-column>
        <el-table-column width="300" property="address" label="地址"></el-table-column>
      </el-table>
      <el-button slot="reference">加了v-scoped指令</el-button>
    </el-popover>
    <br>
    <br>
    <el-popover
        popper-class="my-popper"
        placement="right"
        width="400"
        trigger="click">
      <el-table :data="gridData">
        <el-table-column width="150" property="date" label="日期"></el-table-column>
        <el-table-column width="100" property="name" label="姓名"></el-table-column>
        <el-table-column width="300" property="address" label="地址"></el-table-column>
      </el-table>
      <el-button slot="reference">没了v-scoped指令</el-button>
    </el-popover>

    <div v-highlight>
      <pre>
         <h3>自定义指令:v-scoped,给特定容器追加scopedId</h3>
         <code class="javascript" v-text="`
          export default {
              install(Vue) {
                  // 传递this,即binding.value等于使用指令组件的this,拿到this的scopeId并赋值给想要的对象
                  Vue.directive('scoped', function (el, binding) {
                      const scopedId = binding.value.$options._scopeId
                      if (!scopedId) return
                      const componentTag = el.__vue__.$vnode.tag
                      const target = []
                      if (componentTag.includes('ElPopover')) {
                          // ElPopover的弹出层是el的第0个children
                          target.push(el.children[0])
                      } else if (false) {
                          // 这里加别的判断
                      } else {
                          target.push(el)
                      }
                      target.forEach(el => el.setAttribute(scopedId, ''))
                  })
              }
          }`">
        </code>
        <h3>组件template模板代码</h3>
        <code class="html" v-text='`
          <el-popover
            v-scoped="this"
            popper-class="my-popper"
            placement="right"
            trigger="click">
              <el-table :data="gridData">
                <el-table-column width="150" property="date" label="日期"></el-table-column>
                <el-table-column width="100" property="name" label="姓名"></el-table-column>
                <el-table-column width="300" property="address" label="地址"></el-table-column>
              </el-table>
              <el-button slot="reference">click 激活</el-button>
          </el-popover>`'>
        </code>
        <h3>组件style标签，加了scoped也可精准命中App同级弹出层</h3>
        <code class="html" v-text='`
          <style scoped>
            .my-popper {
              height: 400px;
              display: flex;
              align-items: center;
              background: pink;
            }
            /*设置小三角的颜色*/
            .my-popper ::v-deep .popper__arrow {
              border-right-color: pink;
            }
            /*设置小三角的after伪类颜色*/
            .my-popper ::v-deep .popper__arrow::after {
              border-right-color: pink;
            }
          </style>
        `'>
        </code>
      </pre>
    </div>
  </div>
</template>

<script>
export default {
  name: "vScopedId",
  data() {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
}
</script>

<style scoped>
.my-popper {
  height: 400px;
  display: flex;
  align-items: center;
  background: pink;
}

/*设置小三角的颜色*/
.my-popper ::v-deep .popper__arrow {
  border-right-color: pink;
}

.my-popper ::v-deep .popper__arrow::after {
  border-right-color: pink;
}
</style>
